<template>
  <div>
    <el-form label-width="120px">
      <el-form-item label="绑定手机">
        <el-input
          v-model="form.mobile"
          aria-placeholder="请输入手机号"
          placeholder="请输入手机号"
        />
      </el-form-item>
      <el-form-item label="性别">
        <el-radio-group v-model="form.sex">
          <el-radio v-for="x in types" :key="x.value" :label="x.value">{{ x.label }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="姓名">
        <el-input
          v-model="form.name"
          aria-placeholder="请输入姓名"
          placeholder="请输入姓名"
        />
      </el-form-item>
      <el-form-item label="出生年月">
        <el-date-picker
          v-model="form.birth"
          value-format="yyyy-MM-dd"
          aria-placeholder="请输入出生年月"
          placeholder="请输入出生年月"
        />
      </el-form-item>
      <el-form-item label="所在年级">
        <GradeSelect
          v-model="form.grade_id"
          aria-placeholder="请输入需求内容"
          placeholder="请输入需求内容"
        />
      </el-form-item>
      <el-form-item label="所在班级">
        <ClassSelect
          v-model="form.class_name"
          aria-placeholder="请输入需求内容"
          placeholder="请输入需求内容"
        />
      </el-form-item>
      <el-form-item label="入学时间">
        <el-date-picker
          v-model="form.entrance_at"
          value-format="yyyy-MM-dd"
          aria-placeholder="请输入需求内容"
          placeholder="请输入入学时间"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSubmit">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { create, show, update } from '../../api/student'
export default {
  components: {
    GradeSelect: () => import('../statistics/components/grade-select'),
    ClassSelect: () => import('../statistics/components/class-select')
  },
  data() {
    return {
      form: {
        entrance_at: '',
        class_name: '',
        name: '',
        grade_id: '',
        mobile: '',
        birth: '',
        sex: 1
      },
      types: [
        {
          label: '男',
          value: 1
        },
        {
          label: '女',
          value: 2
        }
      ]
    }
  },
  mounted() {
    if (this.$route.params.id) {
      show(this.$route.params.id).then(res => {
        console.log(res)
        this.form.mobile = res.account.mobile
        this.form.name = res.name
        this.form.entrance_at = res.entrance_at
        this.form.sex = res.sex
        this.form.birth = res.birth
        this.form.class_name = res.class_name
        this.form.grade_id = res.grade_id
      })
    }
  },
  methods: {
    handleSubmit() {
      if (this.$route.params.id) {
        update(this.form, this.$route.params.id).then((res) => {
          console.log('需求', res)
          this.$router.push({
            name: 'student-index'
          })
        })
      } else {
        create(this.form).then((res) => {
          console.log('需求', res)
          this.$router.push({
            name: 'student-index'
          })
        })
      }
    }
  }
}
</script>
